<template>
  <el-input
      v-model="filterText"
      style="width: 240px"
      placeholder="请输入关键字过滤"
  />
  <el-tree
      ref="regionTreeRef"
      style="max-width: 600px"
      :data="regionTree"
      :props="defaultProps"
      :filter-node-method="filterNode"
  />
</template>

<script setup>
import {getTreeList} from "@/api/user/region.js";
import {ref, onMounted} from "vue";

let filterText = ref('')
let regionTreeRef = ref({})

watch(filterText, (val) => {
  regionTreeRef.value.filter(val)
})

let filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value)
}

let defaultProps = {
  children: 'children',
  label: 'name',
}
let regionTree = ref([])
let initData = async () => {
  let {data} = await getTreeList()
  regionTree.value = data
}
onMounted(() => {
  initData()
})

</script>